<!--
 * @Description:动画基本函数
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-23 22:04:51
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>动画基本函数</title>
	<style>
		#run {
			width: 100px;
			height: 100px;
			background: pink;
			position: absolute;
			left: 0px;
			top: 50px;
		}
	</style>
	<script>
		window.onload = function () {
			function $(id) {
				return document.getElementById(id);
			}
			var btn200 = $("btn200")
			var btn400 = $("btn400")
			var div = $("div1")
			var timer = null
			btn200.onclick = function () {
				animate($("run"), 200)
			}
			var arr=[]
			arr.index=10
			btn400.onclick = function () {
				animate($("run"), 400)
			}

      //运动函数 移动对象 移动距离
			function animate(obj,target){
				obj.timer=setInterval(()=>{
					if (obj.offsetLeft > target) {
					clearInterval(obj.timer)
					}
					obj.style.left=obj.offsetLeft + 10 + "px"
				},30)
			}

		}
	</script>
</head>

<body>
	<button id="btn200">开始200</button>
	<button id="btn400">开始400</button>
	<div id="run"></div>
</body>

</html>